import {Button, Form, FormProps, Input, MessagePlugin} from "tdesign-react";
import FormItem from "tdesign-react/es/form/FormItem";
import {Link} from "react-router";
import {useState} from "react";
import {reqResetPassword, sendSmsCode, SmsSceneEnum} from "../api/auth.ts";

export default function ResetPassword() {
  const [form] = Form.useForm();
  const [countdown, setCountdown] = useState(0);
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');

  const handleSendCode = async () => {
    if (countdown > 0) return;
    await sendSmsCode(phone, SmsSceneEnum.RESET_PASSWORD)
    // 模拟发送验证码请求
    MessagePlugin.success('验证码已发送');

    let time = 60;
    setCountdown(time);
    const timer = setInterval(() => {
      time -= 1;
      setCountdown(time);
      if (time <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  };

  const onSubmit: FormProps["onSubmit"] = async (e) => {
    if (e.validateResult === true) {
      const res = await reqResetPassword({
        ...e.fields
      })
      console.log(res)
      MessagePlugin.info('成功')
    }
    if (e.fields.passwordR !== e.fields.password) {
    }
  }

  return (
    <div className="flex flex-col items-center justify-center">
      <h1 className="font-bold text-xl mb-8">修改密码</h1>

      <Form className="w-[320px]" form={form} onSubmit={onSubmit} resetType="empty" preventSubmitDefault showErrorMessage>
        <FormItem name="mobile" rules={[{required: true, message: '请输入手机号', type: 'error'}, {telnumber: true, message: '请输入正确的手机号'}]}>
          <Input placeholder="请输入手机号" size="large" value={phone} onChange={setPhone}/>
        </FormItem>

        <FormItem name="code" rules={[{required: true, message: '请输入验证码', type: 'error'}]}>
          <Input placeholder="请输入验证码" size="large" suffix={
            <Button
              theme="primary"
              variant="text"
              size="small"
              disabled={countdown > 0}
              onClick={handleSendCode}
            >
              {countdown > 0 ? `${countdown}s后重试` : '发送验证码'}
            </Button>
          }/>
        </FormItem>

        <FormItem name="password" rules={[{required: true, message: '请输入新密码', type: 'error'}, {min: 6}]}
                  tips="密码长度至少6位，可以包含字母、数字和特殊字符">
          <Input placeholder="请输入新密码" size="large" value={password} onChange={e => setPassword(e)}/>
        </FormItem>

        <FormItem name="passwordR" rules={[{required: true, message: '请再次输入新密码', type: 'error'}, {min: 6}, {
          validator: val => val === password,
          message: '两次密码需要一致'
        }]}>
          <Input placeholder="请再次输入新密码" size="large"/>
        </FormItem>

        <FormItem>
          <Button className="bg-linear-to-r from-[#3588FF] to-[#8D76FF]" style={{border: 'none'}} size="large" type="submit" block>重置密码</Button>
        </FormItem>
      </Form>

      <div className="flex justify-center flex-row w-[320px] text-sm text-[#177BFF] mt-5">
        <Link to="/account">返回登陆</Link>
      </div>
    </div>
  )
}
